<template>
<div class="cashback-info views-container">
    <el-dialog @close="clearReason" :visible.sync="dialogVisibleImg" width="30%" custom-class="reset-pwd wlm-form-dialog dialog-table">
        <div class="wlm-form" v-if="dialogVisibleImg">
            <div class="wlm-form-header wlm-dialog-fixheader">
                <span class="wlm-dialog-inlenr">失败原因</span>
            </div>
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <div class="wlm-form-content">
                    <div class="wlm-dialog-main">
                        <div class="wlm-dialog-content">
                            <el-form :model="openDialogText" size="small" label-width="120px" class="retail-form" label-position="right">
                                <el-form-item label="原因">
                                    <el-input v-if="!isReasonText" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" v-model="reason">
                                    </el-input>
                                    <p v-if="isReasonText">{{reasonText}}</p>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
            <el-button v-if="isReasonText" size="small" type="primary" @click="dialogVisibleImg=false">关闭</el-button>
        </footer>
    </el-dialog>
    <div class="wlm-table">
        <div class="wlm-table-header">
            <el-form :model="tableFormatData.userTable.files" size="small" label-width="85px" class="retail-form" label-position="right">
                <el-form-item label="" class="filter">
                    <el-form-item label="订单编号：">
                        <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.userTable.files.order_no" placeholder="请输入内容" style="width:160px;"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="wlm-table-content">
            <el-table :ref="tableFormatData.userTable.key" :data="tableFormatData.userTable.tableData" @selection-change="handleSelectionChange" style="width: 100%">
                <!-- <el-table-column type="selection" width="55">
                </el-table-column> -->
                <el-table-column prop="name" label="订单编号" >
                    <template slot-scope="scope">
                        <span>{{scope.row.order_no}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="用户信息" >
                    <template slot-scope="scope">
                        <div class="wlm-table-logos">
                            <img class="logo" :src="scope.row.avatarUrl">
                            <div class="inner-text">
                                <p>{{scope.row.nickName}}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="返现形式" >
                    <template slot-scope="scope">
                        <span v-show="scope.row.return_type==1">微信红包</span>
                        <span v-show="scope.row.return_type==2">微信零钱</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="返现状态" >
                    <template slot-scope="scope">
                        <div v-if="scope.row.status=='1'">
                          <span>待返现</span>
                          <!-- <el-tooltip class="item" effect="dark" :content="scope.row.reason" placement="top">
                                <el-button size="mini" circle icon="el-icon-question"></el-button>
                            </el-tooltip> -->
                        </div>
                        <span v-if="scope.row.status=='2'" class="orders-green">已返现</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="实付金额" >
                    <template slot-scope="scope">
                        <span>{{scope.row.pay_price}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="返现金额" >
                    <template slot-scope="scope">
                        <span>{{scope.row.cashback_money}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="付款方式" >
                    <template slot-scope="scope">
                        <span>{{payType[scope.row.pay_type]}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作"  min-width="110">
                    <template slot-scope="scope">
                        <div class="operation-group">
                            <router-link class="wlm-text" tag="span" :to="{path:`${linkDetailType[`${scope.row.express_type}`]}`, query:{order_id:scope.row.order_id,nickName:scope.row.nickName,user_id:scope.row.user_id}}">
                                <el-button type="text">查看订单</el-button>
                            </router-link>
                            <div v-if="scope.row.status=='1'" class="btn-line"></div>
                            <el-button v-if="scope.row.status=='1'" class="wlm-text" type="text" @click="luckOpen(scope.row.order_id)">立即返现</el-button>
                            <div v-if="scope.row.status=='1'" class="btn-line"></div>
                            <el-button v-if="scope.row.status=='1'" class="wlm-text" type="text" @click="dialogVisibleImg=true,reasonText=scope.row.reason,isReasonText=true">失败原因</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</div>
</template>

<script>
import {
  getReturnList,
  getGroupsShow,
  getReturnData
} from '@/api/application'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table')],
  name: 'CashbackInfo',
  components: {
  },
  created() {
    getGroupsShow({ groups_id: this.$route.query.groups_id }).then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      this.categoryData = msgData
    })
  },
  data() {
    return {
      openDialogText: {},
      isReasonText: false,
      dialogVisibleImg: false,
      payType: {
        'wechat': '微信',
        'admin': '后台确认',
        'alipay': '支付宝',
        'blance': '余额',
        'zero': '零元',
        '-': '-'
      },
      linkDetailType: {
        '4': 'ordersCardPasswordManagementDetail',
        '3': '/orders/ordersVerificationManagementDetail',
        '2': '/orders/ordersComeStoreManagementDetail',
        '1': '/orders/ordersExpressManagementDetail'
      },
      categoryData: {},
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: getReturnList
          },
          tableData: [],
          files: {
            order_no: '',
            ids: [],
            checkall: '0',
            Recycle: '1'
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  methods: {
    luckOpen(id) {
      this.$confirm('是否确认立即返现?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getReturnData({ order_id: id }).then(response => {
          const { data: { msg, code } } = response
          if (code === 1) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.$nextTick(() => {
              this.filesSerch()
            })
          } else {
            this.$message.error(msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    clearReason() {
      this.reason = ''
      this.reasonId = ''
      this.isReasonText = false
      this.reasonText = ''
    }
  }
}
</script>
